<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../css/public.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css">
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="../style/4-tanchishe.css" />
	<link rel="stylesheet" href="../style/4-tanchishe-phone.css">
	<script src="../JS/iconfont.js"></script>
	<script src="../JS/jquery-3.6.0.min.js"></script>
	<script defer src="../JS/index.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.icon {
			width: 50px;
			height: 50px;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	</style>
	<body>
		<div class="wrapper">
			<header>
				<div class="nav">
					<a href="../index.html" class="box"><i class="iconfont icon-zhuye"><span>主页</span></i></a>
					<a href="1-saolei.html" class="box"><i class="iconfont icon-zhadan"><span>扫雷</span></i></a>
					<a href="2-wuziqi.html" class="box"><i class="iconfont icon-wuziqi-xian"><span>五子棋</span></i></a>
					<a href="3-zhajinhua.html" class="box"><i class="iconfont icon-poker2"><span>炸金花</span></i></a>
					<a href="#" class="box" style="background-color;background-color: #00ffff;"><i
							class="iconfont icon-snake" style="color: blue;"><span>贪吃蛇</span></i></a>
				</div>
			</header>
			<aside>
				<div class="warpBox" style="margin-left: 10%;">
					<!-- 左手柄区域 -->
					<div class="leftArea">
						<div class="buttonArea">
							<button id="up">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-shanghua"></use>
								</svg>
							</button>
							<button id="left">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-zuohua"></use>
								</svg>
							</button>
							<button id="down">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-xiahua"></use>
								</svg>
							</button>
							<button id="right">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-youhua"></use>
								</svg>
							</button>
						</div>
					</div>

					<div class="middleArea">
						<!-- 屏幕区域 -->
						<div class="screen">
							<!-- 贪吃蛇 -->
							<div class="eatenSnake">
								<!-- 游戏视口 -->
								<div class="activeArea">
									<!-- 蛇蛇 -->
									<ul class="snake">
										<li></li>
									</ul>

									<!-- 食物 -->
									<div class="food"></div>
								</div>
								<!-- 分数视口 -->
								<div class="display">
									<div id="score">
										<p>分数</p>
									</div>
									<div id="level">
										<p>等级</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 右手柄区域 -->
					<div class="rightArea">
						<button id="pause">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-zanting"></use>
							</svg>
						</button>
					</div>

					<!-- 暂停区域 -->
					<div class="pauseArea">
						<div class="maxScore">
							<p id="name">昵称：</p>
							<p id="maxScore">最高分数：</p>
							<p id="maxLevel">最高等级：</p>
						</div>
						<div class="img">
							<img src="./images/face3.jpg" />
							<div class="textArea">
								<p id="stateDisplay">游戏结束!</p>
								<p id="scoreRes">分数：</p>
								<p id="levelRes">等级：</p>
							</div>
						</div>
						<div class="start-continue">
							<button id="startGame">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-yunhang"></use>
								</svg>
							</button>
							<button id="continue">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-icon-"></use>
								</svg>
							</button>
						</div>
					</div>
				</div>
			</aside>
			<footer>

			</footer>
		</div>
	</body>
</html>